<template>
  <div class="setting-table" @click="visibility = !visibility">
    <el-icon><Setting /></el-icon>
  </div>
  <Settings v-if="visibility" v-model:visibility="visibility" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Setting } from "@element-plus/icons-vue";
import Settings from "./setting.vue";
const visibility = ref(false);
</script>
<style lang="scss" scoped>
@use "../../styles/index" as *;
.setting-table {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  line-height: 46px;
  color: #666666;
  text-align: center;
  cursor: pointer;
  background-color: var(--el-fill-color-light);
  border: 1px solid #eeeeee;
}
.setting-dialog {
  padding-bottom: 0;
  .el-dialog__header {
    margin-bottom: 0;
  }
  &-body {
    display: flex;
    gap: 32px;
    justify-content: space-between;
    &-content {
      display: flex;
      flex: 1;
      flex-flow: column nowrap;
    }
    .title {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #666666;
    }
    .content {
      display: flex;
      flex: 1;
      flex-flow: column nowrap;
      .cot {
        height: 360px;
        padding: 8px 0;
        margin-top: 8px;
        overflow: auto;
        border: 1px solid #eeeeee;
        border-radius: 5px;
        li {
          height: 24px;
          padding: 4px 20px;
          line-height: 24px;
          cursor: pointer;
          &:hover {
            background-color: #eeeeee;
          }
        }
        &-title {
          height: 30px !important;
          font-size: 12px !important;
          line-height: 30px !important;
          color: #aaaaaa;
          &:hover {
            background-color: #ffffff !important;
          }
        }
        &-choose {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        &-active {
          color: $primary-color;
        }
      }
    }
    &-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0 0;
      .reset {
        color: $primary-color;
      }
    }
  }
}
</style>
